<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>确认订单</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          .h10 {
            height: 0.5rem;
            background: #F3EFEE
          }
          #header_top .aui-pull-right {
            color: #333
          }
          #header_top .aui-pull-left span {
            color: #333
          }
          .eval_star_outer {
            background: #fff;
            padding: 0.5rem 0.75rem
          }
          .eval_star {
            font-size: 0;
            margin-left: 1rem;
            display: inline-block;
            vertical-align: sub;
          }
          .eval_star li {
            width: 1.2rem;
            margin: 0 0.2rem;
            display: inline-block;
          }
          .eval_content {
            background: #fff;
            padding: 0.5rem 0.75rem;
          }
          .eval_content textarea {
            margin-top: 0.5rem;
            background: #f7f7f7;
            padding: 0.5rem;
            font-size: 0.7rem;
            width: 100%;
            height: 10rem;
            border-radius: 5px;
          }
          .upload_outer {
            background: #fff;
            padding: 0.5rem 0.75rem;
          }
          .upload {
          margin: 0.5rem 0.5rem 0;
            width: 4rem;
              display: inline-block;
          }
          .upload img {
            width: 100%;
          }
          #header_top {
            position: fixed;
            width: 100%;
          }
          #app {
            padding-top: 3.5rem;
          }
          .uploadImg {
            position: relative;
            margin: 0.5rem 0.5rem 0;
            width: 4rem;
            display: inline-block;
            background: #ececec;
          }
          .uploadImg img {
            opacity: 0;
              width: 100%;
          }
          .uploadImg > span {
            position: absolute;
            top: 3px;
            right: 3px;
            font-size: 0.8rem;
            line-height: 1rem;
            text-align: center;
            width: 1rem;
            height: 1rem;
            z-index: 11;
            background: #ff6767;
            border-radius: 50%;
            color: #fff;
            -webkit-border-radius: 50%;
          }
      </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <header id="header_top" class="aui-bar aui-bar-nav aui-bar-light">
        <a class="aui-pull-left" onclick="goback()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title changeTitle">评价</div>
        <a class="aui-pull-right" @click="submit()">
            发布
        </a>

      </header>
      <div class="h10"></div>
          <ul class="aui-list aui-media-list">
             <li class="aui-list-item-middle aui-list-item apply_main_li" style="padding-bottom:0.7rem;">
               <div class="aui-media-list-item-inner">
                   <div class="aui-list-item-media" style="width: 5rem;">
                       <img :src="info.goods_pic" class="aui-list-img-md">
                   </div>
                   <div class="aui-list-item-inner">
                       <div class="aui-list-item-text">
                         <div  class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                           <div class="aui-font-size-12">{{info.goods_name}}</div>
                           <div class="aui-list-item-text aui-font-size-12">
                             <div class="make_nav_content_div">
                               {{info.sku_info}}
                             </div>
                           </div>
                           <div class="aui-list-item-text aui-font-size-18 make_money_tag" style="margin-top:0.4rem">
                             <div class="make_nav_content_div" v-if="info.type == 1">
                               <span class="make_money_tag_text">￥</span>
                               <span style="color:#f23030;">{{info.goods_price}}</span>
                             </div>
                             <div class="make_nav_content_div" v-else-if="info.type == 2">
                               <span class="make_money_tag_text">{{info.goods_price}}分</span>
                             </div>
                             <div class="make_nav_content_div" v-else-if="info.type == 3">
                               <span class="make_money_tag_text">{{info.goods_price}}兑换币</span>
                             </div>
                             <div  class="aui-list-item-right" style="font-size:0.7rem">×{{info.goods_nums}}</div>
                           </div>
                        </div>
                       </div>
                   </div>
               </div>
               <!-- <div>
                 <h5>附送赠品</h5>
                 <div class="aui-list ex">
                   <div class="exchangeList_right">
                     <div class="aui-list-item-media">
                         <div style="background:url(../../image/cpimg.jpg) no-repeat center/cover;width:100%;height:100%;" class="exchangeList_img"></div>
                     </div>
                     <div class="exchangeList_right_txt">
                         <div class="aui-list-item-text">
                             <div class="aui-list-item-title">洗护合一洗发水</div>
                         </div>
                         <div class="aui-list-item-text">规格：700ml</div>
                         <div class="exchangeList_right_bottom clearfix">
                             <div class="exchangeList_right_bottom1">赠品</div>
                             <div class="exchangeList_right_bottom2">x1</div>
                         </div>
                     </div>
                   </div>
                 </div>
               </div> -->

             </li>
          </ul>
          <div class="h10"></div>
          <div class="eval_star_outer">
            商品评级
            <ul class="eval_star">
              <li @click="clickStar(index)" v-for="(item, index) in star"><img src="..\..\image\two\star-on.png" alt=""></li>
              <li @click="clickStar(star + index)" v-for="(item, index) in (5 - star)"><img src="..\..\image\two\star-off.png" alt=""></li>
            </ul> <span v-if="star > 0">{{star}}.0</span>
          </div>
          <div class="eval_star_outer">
            物流服务
            <ul class="eval_star">
            <li @click="clickStar1(index)" v-for="(item, index) in star1"><img src="..\..\image\two\star-on.png" alt=""></li>
              <li @click="clickStar1(star1 + index)" v-for="(item, index) in (5 - star1)"><img src="..\..\image\two\star-off.png" alt=""></li>
            </ul> <span v-if="star1 > 0">{{star1}}.0</span>
          </div>
          <div class="eval_star_outer">
            服务态度
            <ul class="eval_star">
            <li @click="clickStar2(index)" v-for="(item, index) in star2"><img src="..\..\image\two\star-on.png" alt=""></li>
              <li @click="clickStar2(star2 + index)" v-for="(item, index) in (5 - star2)"><img src="..\..\image\two\star-off.png" alt=""></li>
            </ul> <span v-if="star2 > 0">{{star2}}.0</span>
          </div>
          <div class="h10"></div>
          <div class="eval_content">
            填写评价
            <textarea placeholder="请发表您的评价..." v-model="eval_content"></textarea>
          </div>
          <div class="h10"></div>
          <div class="upload_outer">
            商品图片<br/>
            <div class="upload" @click="showAction()">
                <img src="../../image/my/m34.png">
            </div>
            <div class="uploadImg" v-for="(item, index) in imageList" :key="index" :style="'background:#333 url('+item+') no-repeat center/cover'" v-if="item != ''">
              <img src="../../image/my/m34.png">
              <span class="clearImg" @click="clearImg(index)">×</span>
            </div>
          </div>
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">
  function goback(){

    api.closeWin();
  }
      apiready = function(){
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
              info: {},
              star: 0,
              star1: 0,
              star2: 0,
              eval_content: '',
              imageList: [],
              imageStr: ''
            },
            created: function() {
                var $_this = this
                $_this.info = api.pageParam.info

            },
            mounted: function() {
                var $this = this;

                api.hideProgress();
            },
            methods: {
              clickStar: function (index) {

                var $this = this;
                $this.star = index + 1
              },
              clickStar1: function (index) {
                var $this = this;
                $this.star1 = index + 1
              },
              clickStar2: function (index) {
                var $this = this;
                $this.star2 = index + 1
              },
              // 上传图片
              showAction: function (){
                var $_this = this
                api.actionSheet({
                    title: '上传商品图片',
                    cancelTitle: '取消',
                    buttons: ['图片','拍照']
                }, function(ret, err) {
                    if (ret.buttonIndex==2) {
                      $_this.personImg('camera')
                    }else if(ret.buttonIndex==1){
                      $_this.personImg('library')
                    }
                });
              },
              clearImg: function (index) {
                this.$set(this.imageList, index, '')
              },
              personImg: function (type) {
                var $_this = this
                api.getPicture({
                    sourceType: type,
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    allowEdit: true,
                    quality: 100,
                    // targetWidth: 100,
                    // targetHeight: 100,
                    saveToPhotoAlbum: false
                }, function(ret, err){
                    if(ret){
                       //  console.log(JSON.stringify(ret));
                      $_this.imageList.push(ret.data)
                     }

                })
              },
              submit: function() {
                var $this = this;
                if ($this.star < 1) {
                  api.toast({ msg: '请进行评分',duration: 2000,location:'middle' });
                  return
                }
                if ($this.eval_content == '') {
                  api.toast({ msg: '请发表您的评价',duration: 2000,location:'middle' });
                  return
                }
                if($this.imageList.length > 0) {
                  var imgs = {}
                  for (var i = 0; i < $this.imageList.length; i++) {
                    if(i == 0) {
                      imgs["imgs"]=$this.imageList[i];
                    }else {
                      imgs["imgs"+i]=$this.imageList[i];
                    }
                  }
                } else {
                  var imgs = null
                }
                api.showProgress({
                    style: 'default',
                    animationType: 'fade',
                    title: '努力上传中...',
                    text: '先喝杯茶...',
                    modal: false
                });
                //console.log(JSON.stringify(imgs))
                api.ajax({
                    url: window.Url.Freeorder_evaluateOrder,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            orderGoodsId: $this.info.order_goods_id,
                            orderId: api.pageParam.id,
                            fraction: $this.star,
                            logistics_fraction:$this.star1,
                            service_fraction:$this.star2,
                            content: $this.eval_content,
                        },
                            files:imgs
                    },
                    timeout: 300,
                }, function(ret, err) {
                    if (ret) {
                        api.hideProgress();
                        api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                        api.closeWin()
                        api.execScript({
                            name: 'orderAll',
                            frameName: '5',
                            script: 'window.location.reload()'
                        })
                        api.execScript({
                            name: 'orderAll',
                            script: 'window.location.reload()'
                        })
                        api.execScript({
                            name: 'order_evaluate',
                            script: 'window.location.reload()'
                        })
                    } else {
                        api.alert({ msg: JSON.stringify(err) });
                    }
                })
              }
            }
        })
      };

  </script>
  </html>
